<template>
  <div class="right_info_box ">
    <div class="top_box">
      <div class="top_left_box top_left_img ">
        <ul class="yjrsb_box Font_s39">
          <li class="Font_s24">已接入设备 ： </li>
          <li>1</li>
          <li>0</li>
          <li>2</li>
        </ul>
        <div class="yjrsb_content">
          <div class="sb_number">
            <div class="on-line_bg Font_s48">99</div>
            <p class="Font_s24" >设备在线数量</p>
          </div>
          <div class="sb_number">
            <div class="on-line_bg Font_s48" style="color: #2AFAFC">3</div>
            <p class="off-line Font_s24">设备离线数量</p>
          </div>
        </div>
      </div>
      <div class="top_right_box top_right_img ">
        <p class="top_right_title Font_s24">签到记录</p>
        <ul class="sign_record_ul Font_s22">
          <li>
            <i class="user_head"></i>
            <div class="user_conent">
              <p class="user_name Font_s28">王小华</p>
              <p class="user_address">南通综合为老服务中心</p>
            </div>
            <label class="sign_time Font_s18">签到：2019-02-12 12:31:19</label>
          </li>
          <li>
            <i class="user_head"></i>
            <div class="user_conent">
              <p class="user_name Font_s28">王小华</p>
              <p class="user_address">南通综合为老服务中心</p>
            </div>
            <label class="sign_time Font_s18">签到：2019-02-12 12:31:19</label>
          </li>
        </ul>
      </div>
    </div>
    <div class="bottom_box ">
      <p class="reception_title Font_s24">近7天接待量趋势图</p>
      <div id="chart" class="chart"></div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'RightInfo',
  data () {
    return {
      arrX: ['周三', '周四', '周五', '周六', '周日', '周一', '周二'],
      arrY: [693, 393, 293, 324, 564, 393, 496]
    }
  },
  mounted () {
    this.receptionFun(this.arrX, this.arrY)
  },
  methods: {
    receptionFun (arrX, arrY) {
      let myChart = this.$echarts.init(document.getElementById('chart'))
      let option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#fff'
            }
          }
        },
        color: ['#FD9C28'],
        grid: {
          left: '5%',
          right: '5%',
          top: '6%',
          bottom: '20%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: arrX,
            axisLabel: {
              show: true,
              textStyle: {
                color: 'white'
              }
            },
            axisLine: { // y轴
              show: false,
              textStyle: {
                color: 'white'
              }
            },
            axisTick: {
              show: false,
              textStyle: {
                color: 'white'
              }
            },
            splitLine: {
              show: false,
              lineStyle: {
                color: '#ff44ff',
                width: 5,
                type: 'solid'
              }
            },
            axisPointer: {
              type: 'shadow'
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '',
            axisLabel: {
              show: true,
              textStyle: {
                color: 'white'
              },
              formatter: '{value}'
            },
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            splitLine: {
              show: false
            }
          }
        ],
        series: [{
          type: 'line',
          name: '',
          itemStyle: {
            normal: {
              areaStyle: {
                type: 'default',
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1,
                  [ {
                    offset: 0,
                    color: '#FFCF0E'
                  }, {
                    offset: 0.2,
                    color: '#F8C103'
                  }, {
                    offset: 1,
                    color: '#00000000'
                  } ])
              },
              lineStyle: {
                width: 3,
                type: 'solid',
                color: '#FF9D02'
              }
            }
          }, // 线条样式
          symbolSize: 5, // 折线点的大小
          smooth: true,
          areaStyle: { normal: {} },
          data: arrY
        }
        ]
      }
      myChart.setOption(option)
      window.addEventListener('resize', () => {
        myChart.resize()
      })
    }
  }

}
</script>

<style scoped lang="less">
  .right_info_box {
    width: 85.3125rem;
    overflow: hidden;
    position: relative;
    margin-top: 2rem;
    .bottom_box{
      width: 85.3125rem;
      height: 26.25rem;
      position: relative;
      overflow: hidden;
      background: url("../../../src/assets/img/communityPension/ic_qushitu.png");
      background-size: 100% 100%;
      .reception_title{
        color:rgba(255,255,255,1);
        text-shadow:0px 0px 10px rgba(5,8,53,0.75);
        background:linear-gradient(0deg,rgba(99,207,231,1) 0%, rgba(255,255,255,1) 100%);
        -webkit-background-clip:text;
        -webkit-text-fill-color:transparent;
        text-align: left;
        margin: 2.9375rem 0 1rem 1.9375rem;
      }
      .chart {
        height: 90%;
        width: 95%;
      }
    }
    .top_box {
      width: 85.3125rem;
      position: relative;
      overflow: hidden;
      .top_left_img {
        background: url("../../../src/assets/img/communityPension/ic_yijierushebei.png");
        background-size: 100% 100%;
      }
      .top_right_img {
        background: url("../../../src/assets/img/communityPension/ic_qiandaojilu.png");
        background-size: 100% 100%;
      }
      .top_left_box{
        width: 38.375rem;
        height: 26.25rem;
        float: left;
        .yjrsb_box{
          position: relative;
          margin: 3.4375rem 0 0 2.5rem;
        }
        .yjrsb_box li{
          float: left;
          background: url("../../assets/img/communityPension/ic_shuzi.png") no-repeat;
          background-size: 100% 100%;
          color: white;
          width: 1.6875rem;
          margin: 0 0.4rem;
          height: 2.75rem;
          line-height: 2.75rem;
        }
        .yjrsb_box li:first-child{
          width: auto;
          height: 2.75rem;
          line-height: 2.75rem;
          color:rgba(255,223,0,1);
          text-shadow:0 0 10px rgba(5,8,53,0.75);
          background:linear-gradient(0deg,rgba(99,207,231,1) 0%, rgba(255,255,255,1) 100%);
          -webkit-background-clip:text;
          -webkit-text-fill-color:transparent;
        }
        .sb_number{
          float: left;
          margin-right: 2rem;
          color: white;
        }
        .yjrsb_content{
          position: absolute;
          top: 8rem;
          left: 5.8125rem;
        }
        .on-line_bg{
          background: url("../../assets/img/communityPension/ic_shebeilixianshuliang.png") no-repeat;
          background-size: 100% 100%;
          width: 12.5625rem;
          height: 12.5625rem;
          line-height: 12.5625rem;
          color:rgba(255,223,0,1);;
        }
      }
      .top_right_box{
        width: 46.75rem;
        height: 26.25rem;
        overflow-y: auto;
        float: right;
        .top_right_title{
          margin: 2.625rem 0 0.5rem 2.625rem;
          text-align: left;
          text-shadow:0 0 10px rgba(5,8,53,0.75);
          background:linear-gradient(0deg,rgba(99,207,231,1) 0%, rgba(255,255,255,1) 100%);
          -webkit-background-clip:text;
          -webkit-text-fill-color:transparent;
        }
        .sign_record_ul {
          margin: 0.8rem 1.5rem 0.3rem 1.5rem;
          position: relative;
        }
        .sign_record_ul li{
          background: url("../../assets/img/communityPension/ic_qiandaokaungd.png") no-repeat;
          background-size: 100% 100%;
          padding-left: 6.375rem;
          height: 6.875rem;
          position: relative;
          color: white;
        }
        .sign_record_ul li:last-child{margin-bottom: 1rem}
        .user_head{
           background: url("../../assets/img/communityPension/head_img.png") no-repeat;
           background-size: 100% 100%;
          width: 4rem;
          height: 5.5625rem;
          display: inline-block;
          position: absolute;
          left: 1rem;
          top: 0.65625rem;
        }

        .user_conent{
          height: 6.875rem;
          padding-top: 1.25rem;
          text-align: left;
          .user_name{
            color:rgba(42,250,252,1);
          }
        }
        .sign_time{
          color:rgba(123,232,255,1);
          position: absolute;
          right: 2rem;
          top: 1.75rem;
        }

      }
    }
  }
</style>
